<template>
	<view>
		<Header title="消费记录" :showBack="true"></Header>
		<view class="container">
				<view class="time">
					<view>
						<picker style="width: 100%;height: 100%;text-align: center;" mode="date" :value="startTime"
							start="09:01" end="21:01" @change="bindTimeChange($event,1)">
							<view class="uni-input">{{startTime}}</view>
						</picker>
					</view>
					至
					<view>
						<picker style="width: 100%;height: 100%;text-align: center;" mode="date" :value="endTime" start="09:01"
							end="21:01" @change="bindTimeChange($event,2)">
							<view class="uni-input">{{endTime}}</view>
						</picker>
					</view>
				</view>
				<view v-if="list.length>0" class="box">
					<view v-for="(item,index) in list" :key="index" style="position: relative;">
						<view>机器名称：{{item.miAlias || item.mId}}</view>
						<view>商品名称：{{item.productName || ''}}</view>
						<view>消费时间：{{item.creationTime}}</view>
						<view>
							<view>支付方式：{{item.fPayType}}</view>
							<view>消费金额：{{item.amount}}</view>
						</view>
						<view>
							<view>订单编号：<text user-select>{{item.orderNo}}</text></view>
							<view style="color: #000000;">姓名：{{item.ownerName}}</view>
						</view>
						<view v-if="item.orderStatus==1" class="refunded">已退款</view>
						<view v-if="item.orderStatus!=1&& isShowComplaint" class="refunded request-refund" @click="goRefund(item.orderNo,item.mId)">申请退款</view>
					</view>
				</view>
				<view v-else class="quesheng">
					<image src="../../static/icon/icon_empty.jpg" mode=""></image>
					<view>暂无数据</view>
				</view>
		</view>
		
	</view>
</template>

<script>
	import { SHOW_COMPLAINT } from '@/config.js';
	export default {
		data() {
			return {
				isShowComplaint: SHOW_COMPLAINT,
				curPage: 1,
				isQingqiu: false,
				startTime: '',
				endTime: '',
				list: []
			}
		},
		onLoad() {
			this.setTime()
			this.getInfo()
		},
		onReachBottom() {
			if (this.isQingqiu) {
				this.isQingqiu = false
				this.getInfo()
			}
		},
		methods: {
			goRefund( orderNo, mId ){
				uni.navigateTo({
					url: `/pages/refundRequest/index?orderNo=${orderNo}&mId=${mId}`
				})
			},
			getInfo() {
				let info = uni.getStorageSync('info')
				// this.$http('/minprogram/api/member/getOwnerMemberCardOrderList', {
				this.$http('/member/api/memberCard/getTenantStudentOrderList', {
					"condition": {
						"TrSales": null,
						"trTimeStart": this.startTime,
						"trTimeEnd": this.endTime,
						"memberCardId": info.id
					},
					"pageNum": this.curPage,
					"pageSize": 30

				}, async res => {
					if (res.data.items.length > 0) {
						this.list.push(...res.data.items)
						for (let item of this.list) {
						  item.ownerName = await this.decryptPhone(item.ownerName); 
						}
						if (res.data.items.length == 30) {
							this.curPage++
							this.isQingqiu = true
						}
					}
				})
			},
			decryptPhone(value) {
				if (value === null || value === undefined || value.trim() === '') {
				  return Promise.resolve('');
				}
				return new Promise((resolve,reject)=>{
					// if (value.length > 20 && /[0-9]/.test(value) && /[a-zA-Z]/.test(value)) {
					// if (/[0-9]/.test(value) && /[a-zA-Z]/.test(value)) {
						this.$http('/kernel/api/privacy/decryptPhone',{"CipherTexts":[value] }, res=>{
							if(res.data.data.length>0){
									resolve(res.data.data[0].phone) 
								}else{
									resolve(value)
								}
						})
					// }else{
						// resolve(value)
					// }
				})
			},
			bindTimeChange(e, x) {
				if (x == 1) {
					this.startTime = e.detail.value
				} else if (x == 2) {
					this.endTime = e.detail.value
				}
				if(this.$checkMonth(this.startTime, this.endTime)) return;
				this.curPage = 1
				this.list = []
				this.getInfo()
			},
			setTime() {
				let date = new Date();
				date.setDate(1);
				this.startTime = date.toISOString().split('T')[0];

				let date2 = new Date();
				let currentMonth = date2.getMonth();
				let nextMonth = ++currentMonth;
				let nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1);
				// let oneDay=1000*60*60*24;
				this.endTime = new Date(nextMonthFirstDay).toISOString().split('T')[0]
			}
		}
	}
</script>

<style scoped lang="less">
	.box {
		margin: 20upx;
		>view {
			width: 100%;
			background-color: #FFFFFF;
			margin-top: 20upx;
			border-radius: 10upx;
			padding: 30upx 20upx;
			box-sizing: border-box;
			position: relative;
			// box-shadow: 0 0 15upx rgba(73, 185, 173, .2);
			box-shadow: 0 3upx 20upx 1upx rgba(73, 185, 173, .2);
			view {
				height: 50upx;
				line-height: 50upx;
				font-size: 26upx;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}

			>view {
				width: 100%;
			}

			>view:nth-child(5) {
				display: flex;
				justify-content: space-between;

				>view:first-child {
					width: 60%;
				}

				>view:last-child {
					width: 40%;
					text-align: right;
					border-radius: 10upx;
					color: #FFFFFF;
				}
			}

			>view:nth-child(4) {
				display: flex;
				justify-content: space-between;

				>view:first-child {
					width: 60%;
				}

				>view:last-child {
					width: 40%;
					text-align: right;
				}
			}

			// >view:last-child{
			// 	width: 50upx;
			// 	height: 50upx;
			// 	position: absolute;
			// 	right: 20upx;
			// 	top: 20upx;
			// 	line-height: 50upx;
			// 	text-align: center;
			// 	font-size: 30upx;
			// 	font-weight: 600;
			// }
		}
	}

	.time {
		width: 100%;
		height: 100upx;
		display: flex;
		background-color: #FFF;
		justify-content: space-around;
		align-items: center;
		border-radius: 16upx;
		// box-shadow: 0 0 15upx rgba(73, 185, 173, .2);
		box-shadow: 0 3upx 20upx 1upx rgba(73, 185, 173, .2);
		font-size: 26upx;
		>view {
			width: 40%;
			height: 68%;
			line-height: 66upx;
			background: #f2f2f2;
			border-radius: 10upx;
		}
	}

	.quesheng{
		width: 100%;
		background: #fff;
		margin-top: 20upx;
		// box-shadow: 0 0 15upx rgba(73, 185, 173, .2);
		box-shadow: 0 3upx 20upx 1upx rgba(73, 185, 173, .2);
		border-radius: 16upx;
		font-size: 28upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 330upx 0;
		color: #b3b3b3;
		image{
			width: 180upx;
			height: 150upx;
			margin-bottom: 12upx;
		}
	}
	.refunded{
		position: absolute;
		right: 0;
		top: 0;
		background: #167df3;
		color: #fff;
		text-align: center;
		line-height: 44upx!important;
		width: 100upx!important;
		height: 44upx!important;
		border-radius: 0 16upx;
	}
	.request-refund{
		width: 130upx!important;
		background: #fbc219;
	}
</style>
